<style scoped>
.wraper {
    padding: 0 30px;
}

.search {
    padding-bottom: 20px;
}

.search span {
    color: #68777c;
    font-weight: bold;
    padding-right: 18px;
}

.search button {
    background-color: #00a8f7;
    color: #fff;
    margin-left: 8px;
}

.top {
    margin-bottom: 20px;
    border-top: 1px dashed #cccccc;
}


.wraper .headline {
    position: relative;
    font-size: 12px;
    color: #303134;
    font-weight: bold;
    margin: 10px 0;
    line-height: 32px;
    height: 32px;
}

.wraper .add-agent {
    position: absolute;
    top: 0px;
    right: 30px;
    background-color: #348bf2;
    color: #fff;
}

.iconfont {
    font-size: 14px;
}

.red-font {
    color: #ff1f1f;
}

/* 分页 start */

.page {
    margin: 20px 0;
}
.ivu-page {
    padding-bottom: 150px;
} 

/* 分页 end */


</style>
<style>
.change{
    color: #ff9900;
}
.success{
    color: #19be6b;
}
.back{
    color: #ed3f14;
}
.cancel{
    color: #80848f;
}
</style>

<template>
    <div class="employee-manage">
        <product-title></product-title>
        <div class="wraper">
            <div class="search">
                <span>快速搜索</span>
                <Input v-model="searchForm.name" placeholder="请输入员工姓名" style="width: 140px"></Input>
                <Select v-model="searchForm.status" style="width: 140px" placeholder='请选择状态'>
                    <Option value="0" >全部</Option>
                    <Option value="1" >申请中</Option>
                    <Option value="2" >转账中</Option>
                    <Option value="3" >已完成</Option>
                    <Option value="4" >驳回</Option>
                    <Option value="5" >已撤销</Option>
                </Select>
                <Button @click='search'>查询</Button>
            </div>
            <div class="detail">
                <div class="clearfix">
                    <Table border :columns="columns_record" :data="data_record"></Table>
                    <Row class="page fr">
                        <Col span="24">
                            <Page :total="employeeTotal" show-total show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
                        </Col>
                    </Row>
                </div>
            </div>
        </div>
        <!-- 状态的modal -->
        <Modal v-model="showstatus" :loading="loading" title="状态信息" :mask-closable=false  @on-ok="statusChange()" @on-cancel="cancel()">
            <Row>
                <Col span="20" offset="1">
                    <Form :model="editstatus" ref="editstatus" :rules="ruleValidate" :label-width="100">
                        <Form-item label="处理状态：" prop="status">
                            <Select v-model="editstatus.status"  placeholder='请选择状态'>
                                <Option value="2" >转账中</Option>
                                <Option value="3" >已完成</Option>
                                <Option value="4" >驳回</Option>
                            </Select>
                        </Form-item>
                        <Form-item label="执行时间：" prop="date_datetime">
                            <DatePicker type="datetime" @on-change="date_change($event)" v-model="editstatus.date_datetime" placeholder="请选择执行时间" ></DatePicker>
                        </Form-item>
                        <FormItem label="备注：" prop="msg">
                            <Input v-model="editstatus.msg" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入备注信息"></Input>
                        </FormItem>
                    </Form>
                </Col>
            </Row>
        </Modal>
    </div>
</template>

<script>
import productTitle from '../../components/productTitle'
import { getList , setWithdraw} from '../../api/withdraw'
import { formatTime } from '../../libs/time'
export default {
    data() {
        return {

            page: 1,
            pagesize: 10,
            searchForm: {
                name: '',
                status: '',
            },
            showstatus:false,
            loading:true,
            editstatus:{
                status:'',
                record_id:'',
                date:formatTime(new Date(),'yyyy-MM-dd HH:mm:ss'),
                date_datetime:formatTime(new Date(),'yyyy-MM-dd HH:mm:ss'),
                msg:''
            },
            employeeTotal: 0,
            columns_record: [
                {
                    title: '编号',
                    key: 'id',
                    align: 'center',
                },
                {
                    title: '申请人',
                    key: 'name',
                    align: 'center',
                },
                {
                    title: '申请金额',
                    key: 'amount',
                    align: 'center',
                },
                {
                    title: '申请时间',
                    key: 'apply_time',
                    align: 'center',
                },
                {
                    title: '转账时间',
                    key: 'transfer_time',
                    align: 'center',
                },
                {
                    title: '完成时间',
                    key: 'complete_time',
                    align: 'center',
                },                
                {
                    title: '备注',
                    key: 'msg',
                    align: 'center',
                },
                {
                    title: '当前状态',
                    key: 'status',
                    align: 'center',
                    render: (h, params) => {
                        switch(parseInt(params.row.status)){
                            case 1:
                                return '申请中'
                                break;                                
                            case 2:
                                return  h('div', {
                                            attrs:{
                                                class:'change'
                                            }
                                        },'转账中')  
                                break;
                            case 3:
                                return h('div', {
                                            attrs:{
                                                class:'success'
                                            }
                                        },'已完成')                                                                  
                                break;
                            case 4:
                                return h('div', {
                                            attrs:{
                                                class:'back'
                                            }
                                        },'驳回')  
                                break;
                            case 5:
                                return h('div', {
                                            attrs:{
                                                class:'cancel'
                                            }
                                        },'已撤销')
                                break;
                        }
                        
                    }
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 150,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small',
                                    disabled: params.row.status == 5 ? true :false
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.showModal(params.row.id)
                                    }
                                }
                            }, '编辑'),
                        ]);
                    }
                },
            ],
            data_record: [

            ],
            ruleValidate: {
                status: [
                    { required: true,  message: '处理状态不能为空', trigger: 'blur,change' }
                ],
                date_datetime: [
                    { required: true, type: 'date', message: '执行时间不能为空', trigger: 'blur,change' }
                ],
            }
        }
    },
    components: {
        productTitle
    },
    created() {

    },
    mounted () {
        this.getList() 
    },
    methods: {
        // 搜索
        search() {
            this.page = 1
            this.getList()           
        },
        // 获取员工列表
        getList() {
            let _params = {
                name:this.searchForm.name,
                status:this.searchForm.status,
                p:this.page,
                pagesize:this.pagesize
            }
            new Promise((resolve, reject) => {
                getList(_params).then(response => {
                    console.log(response.data);
                    if (response.data.err == 0) {
                        this.data_record = response.data.data.list;
                        this.employeeTotal = response.data.data.total;
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },

        // 页码改变
        pageChange(page) {
            this.page = page
            this.getList()
        },
        // 每页条数改变
        pageSizeChange(pagesize) {
            this.pagesize = pagesize
            this.getList();
        },
        date_change(date){
            this.editstatus.date = date
        },
        showModal(id){
            this.showstatus = true
            this.editstatus.record_id = id
            this.editstatus.date =  formatTime(new Date(),'yyyy-MM-dd HH:mm:ss')
            this.editstatus.date_datetime = formatTime(new Date(),'yyyy-MM-dd HH:mm:ss')
        },
        statusChange(){
            this.$refs['editstatus'].validate((valid) => {
                if (valid) {                   
                    new Promise((resolve, reject) => {
                        setWithdraw(this.editstatus).then(response => {
                            console.log(response.data);
                            if (response.data.err == 0) {
                                this.showstatus = false
                                setTimeout(() => {
                                    this.loading = false;
                                    this.$nextTick(() => {
                                        this.loading = true;
                                    });
                                }, 2000);
                                this.getList()
                                this.$Message.success(response.data.info);
                                
                            } else {
                                this.$Message.error(response.data.info);
                                setTimeout(() => {
                                    this.loading = false;
                                    this.$nextTick(() => {
                                        this.loading = true;
                                    });
                                }, 2000);
                            }
                            resolve();
                        }).catch(error => {
                            reject(error);
                            setTimeout(() => {
                                this.loading = false;
                                this.$nextTick(() => {
                                    this.loading = true;
                                });
                            }, 2000);
                        });
                    });                                      
                } else {
                    setTimeout(() => {
                        this.loading = false;
                        this.$nextTick(() => {
                            this.loading = true;
                        });
                    }, 2000);
                }
            })
        }
        
    }
}
</script>
